<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人员列表</title>
</head>
<body>
<h1>人员列表首页</h1>
<table border="1">
  <tr>
    <th>人员ID</th>
    <th>用户名</th>
    <th>昵称</th>
    <th>操作</th>
  </tr>
  <tr v-for="u in arr">
    <td>{{u.id}}</td>
    <td>{{u.username}}</td>
    <td>{{u.nick}}</td>
    <td>
      <a href="javascript:void(0)" @click="del(u.id)">删除</a>
      <a :href="'/updateUser.html?id='+u.id">修改</a>
    </td>
  </tr>
</table>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
  let v = new Vue({
    el:"table",
    data:{
      arr:[]
    },
    created:function (){
      axios.get("/selectUser").then(function (response) {
        v.arr=response.data;
      });
    },
    methods:{
      del(id) {
        axios.get("/deleteUser?id=" + id).then(function (response) {
          alert("删除成功!")
          location.reload();
        });
      }
    }
  })
</script>
</body>
</html>